<template>
  <div>
    <input type="text" v-if="flag" ref="myInput" v-focus />
    <button @click="toggle">搜索按钮</button>

    <input type="text" value="123" v-color="color1" />

    <button @click="color1 = 'lawngreen'">修改颜色</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      flag: false,
      color1: 'red'
    }
  },

  methods: {
    toggle() {
      this.flag = !this.flag

      // this.$nextTick(() => {
      //   this.$refs.myInput.focus()
      // })
    }
  }

  //自定义指令
  // directives: {
  //   //在申明的时候不需要在指令前面加v-，后续使用的时候加上即可
  //   focus: {
  //     //el就是指令所在的标签元素
  //     // inserted在标签渲染到dom当中的时候执行
  //     inserted(el) {
  //       console.log(el)
  //       el.focus()
  //     }
  //   }
  // }
}
</script>

<style scoped>
</style>